<template>
    <framework :bg="headerBg" hide-title="true" :title="title" :path="path" :wrap-style="{background: '#FFFFFF'}">
        <div class="sq_contents_box">
            <div class="sq_part_top">
                <span class="f2">{{ parentName }} > {{ detail.title }}</span>
                <span class="f3">{{ detail.createTime }} 详情</span>
            </div>
            <hr>
            <div class="sq_part_bottom">
                <span class="title f2">{{ detail.title }}</span>
                <div class="content f3" v-html="detail.content">

                </div>
            </div>
        </div>
    </framework>
</template>

<script>
import framework from "@/components/framework";

const DETAILS_MAPPING = {
    1: {
        name: "专业团队",
        url: "/lawerInfo/list",
        key: "lawerInfo",
        path: [{name: "专业团队 > ", path: 'expertTeam'}, {name: "专业团队", path: '/allDetails'}],
        headerBg: require('@/assets/img/search_result.png')
    },
    2: {
        name: "新闻中心",
        url: "/newsArticle/info/",
        key: "newsArticle",
        path: [{name: "新闻中心 > ", path: 'newsCenter'}, {name: "新闻详情", path: '/allDetails'}],
        headerBg: require('@/assets/img/news-header.png')
    },
    3: {
        name: "法律著作",
        url: "/lawArticle/info/",
        key: "lawArticle",
        path: [{name: "法律著作 > ", path: 'legalWorks'}, {name: "著作详情", path: '/allDetails'}],
        headerBg: require('@/assets/img/legal-details-header.png')
    },
    4: {
        name: "经典案例",
        url: "/classicCase/info/",
        key: "classicCase",
        path: [{name: "经典案例 > ", path: 'classicCases'}, {name: "案例详情", path: '/allDetails'}],
        headerBg: require('@/assets/img/recruitment-header.png')
    },
    5: {
        name: "招贤纳仕",
        url: "/joinus/info/",
        key: "joinUs",
        path: [{name: "专业团队 > ", path: 'joinUs'}, {name: "专业团队", path: '/allDetails'}],
        headerBg: require('@/assets/img/search_result.png')
    }
};

//法律著作 详情
export default {
    name: "LegalWorksDetails",
    components: {
        framework
    },
    data() {
        return {
            detail: {},
            parentName: "",
            headerBg: "",
            title: "",
            path: ""
        }
    },
    async mounted() {
        if (this.$route.query.type) {
            let {name, url, key, headerBg, path} = DETAILS_MAPPING[this.$route.query.type];
            let data = await this.$http.get(`${url}${this.$route.query.id}`);
            this.parentName = name;
            this.detail = data[key];
            this.headerBg = headerBg;
            this.path = path
            path[1].path = path[1].path + `?id=${this.$route.query.id}&type=${this.$route.query.type}`;
            this.title = name
        }
    },

}
</script>

<style scoped lang="less">
.sq_header {
    background-image: url("~@/assets/img/legal-details-header.png");
}

.sq_part_top {
    display: flex;
    justify-content: space-between;

    span {
        display: block;
    }

    hr {
        margin: 10px 0;
    }
}

.sq_contents_box {
    padding: 20px 100px;
}

.sq_part_bottom {
    color: #656565;

    .title {
        font-weight: 900;
    }
}

.sq_part_bottom > span {
    display: block;
    text-align: center;
}

.content {
    font-weight: 400;
    line-height: 29px;
    color: #707070;
    text-indent: 2rem;
}

</style>


<style lang="less">
@media screen and (min-width: 0px) and (max-width: 680px) {
    #app {
        .sq_contents_box {
            padding: 20px 0;
        }
    }
}
</style>
